import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, Card, Icon } from 'antd';
import Statistic from '../../server/statistic-server.js';
import Mutil from '../../util/mm.js';
import './style.less';
const _mm = new Mutil();
const _statistic = new Statistic();

class Home extends Component {
	constructor(props){
		super(props);
		this.state={
			userCount     : '',
			productCount  : '',
			orderCount    : ''
		}
	}
	componentDidMount() {
		this.loadCount();
	}
	loadCount = () => {
		_statistic.getHomeCount().then(res => {
			this.setState(res);
		}, errMsg => {
			_mm.errorTips(errMsg);
		})
	}
  render() {
    return (
    	<Card title="首页">
	      	<Row>
			    <Link to="/user">
			    	<Col 
				    	className="colHeight colColy" 
				    	xs={{ span: 6, offset: 1 }} 
				    	lg={{ span: 6, offset: 2 }}>
				    	<span className="count">{this.state.userCount}</span>
				    	<Icon type="user-add" />用户总数
			    	</Col>
			    </Link>
			    <Link to="/product">
				    <Col 
				    	className="colHeight colColg" 
				    	xs={{ span: 6, offset: 1 }} 
				    	lg={{ span: 6, offset: 2 }}>
				    	<span className="count">{this.state.productCount}</span>
				    	<Icon type="bar-chart" />商品总数
				    </Col>
				</Link>
				<Link to="/order">
				    <Col className="colHeight colColb" xs={{ span: 6, offset: 1 }} 
				    	lg={{ span: 6, offset: 2 }}>
				    	<span className="count">{this.state.orderCount}</span>
				    	<Icon type="check-square-o" />订单总数
				    </Col>
				</Link>
	  		</Row>
  	</Card>
    );
  }
}

export default Home;
